---
import { urlWithBaseUrl } from '@utils/urlWithBaseUrl';
import styles from './Demos.module.scss';

const { activeTab } = Astro.props;
---

<div class={styles.tabs}>
    <div class:list={[styles.tabItem, activeTab === 'complete' && styles.activeTab]}>
        <a href={urlWithBaseUrl(`/example/`)}>
            <img
                class:list={[styles.showcaseImg, styles.showcaseImgLight]}
                src={urlWithBaseUrl(`/example/performance.png`)}
                alt="Performance Grid illustration"
            />
            <img
                class:list={[styles.showcaseImg, styles.showcaseImgDark]}
                src={urlWithBaseUrl(`/example/performance-dark.png`)}
                alt="Performance Grid illustration"
            />
        </a>
        <span class={styles.label}>Performance</span>
    </div>

    <div class:list={[styles.tabItem, activeTab === 'finance' && styles.activeTab]}>
        <a href={urlWithBaseUrl(`/example-finance/`)}>
            <img
                class:list={[styles.showcaseImg, styles.showcaseImgLight]}
                src={urlWithBaseUrl(`/example/finance.png`)}
                alt="Finance Grid illustration"
            />
            <img
                class:list={[styles.showcaseImg, styles.showcaseImgDark]}
                src={urlWithBaseUrl(`/example/finance-dark.png`)}
                alt="Finance Grid illustration"
            />
        </a>
        <span class={styles.label}>Finance</span>
    </div>

    <div class:list={[styles.tabItem, activeTab === 'crm' && styles.activeTab]}>
        <a href={urlWithBaseUrl(`/example-hr/`)}>
            <img
                class:list={[styles.showcaseImg, styles.showcaseImgLight]}
                src={urlWithBaseUrl(`/example/hr.png`)}
                alt="Grid illustration"
            />
            <img
                class:list={[styles.showcaseImg, styles.showcaseImgDark]}
                src={urlWithBaseUrl(`/example/hr-dark.png`)}
                alt="HR Grid illustration"
            />
        </a>
        <span class={styles.label}>HR</span>
    </div>

    <div class:list={[styles.tabItem, activeTab === 'inventory' && styles.activeTab]}>
        <a href={urlWithBaseUrl(`/example-inventory/`)}>
            <img
                class:list={[styles.showcaseImg, styles.showcaseImgLight]}
                src={urlWithBaseUrl(`/example/inventory.png`)}
                alt="Inventory Grid illustration"
            />
            <img
                class:list={[styles.showcaseImg, styles.showcaseImgDark]}
                src={urlWithBaseUrl(`/example/inventory-dark.png`)}
                alt="Inventory Grid illustration"
            />
        </a>
        <span class={styles.label}>Inventory</span>
    </div>
</div>
